<template>
    <div>

        <t-base-table row-key="id" :data="productList" :columns="columns" :max-height="'70vh'"
            :pagination="{ total: productList.length }">
            <template #type-slot-name="{ col, row }">
                <img style="border-radius:5px;" width="100" height="100" :src="row.imgSrc" alt="">
            </template>
            <template #btn="{ col, row }">
                <t-button variant="outline" theme="primary">查看</t-button>
                <t-button variant="outline" theme="warning" @click="showViewBody(row.id)">修改</t-button>
                <t-button variant="outline" theme="danger" @click="deleteImg(row.id)">删除</t-button>
            </template>
        </t-base-table>

        <t-dialog footer=" " v-model:visible="visibleBody" :on-confirm="onConfirm" attach="body" header="修改轮播图"
            :on-close="close">
            <template #body>
                <div>
                    <t-upload name="file" v-model="file" method="post" action="/api/img/upload2" theme="image"
                        tips="请选择单张图片文件上传" draggable=true @fail="formatResponse" @success="imgSUC" :data="{ id:1 }"
                        @format-response="formatResponse"></t-upload>
                </div>
            </template>
        </t-dialog>

        <t-dialog v-model:visible="visible2" header="确定删除轮播图吗" :confirm-on-enter="true" :on-close="close"
            :on-confirm="checkedDeleteImg" />
        <t-space direction="vertical">
            <t-notification v-if="show" style="position:fixed;top:20px;right:20px;z-index:99999;"
                placeholder="bottom-left" theme="info" title="轮播图" content="上传成功！" :duration="1000"
                @duration-end="show = false" />
        </t-space>
    </div>
</template>

<script setup lang="ts">
import { getShopList, changeImgUrl, deleteImgUrl } from "@/api/shoList";
import { onMounted, reactive, ref, toRaw } from "vue";
import { MessagePlugin } from 'tdesign-vue-next';

// 网络请求图片资源
const productList = ref([]);
const columns = [
    {
        width: '100',
        colKey: 'id',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'createTime',
        title: '创建时间',
    },
    {
        colKey: 'type',
        title: '图片',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'type-slot-name',
    },
    {
        colKey: 'type',
        title: '操作',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'btn',
    },
];
const fetchData = async () => {
    const res = await getShopList();
    productList.value = res.data;
};
onMounted(() => {
    fetchData();
});

// 显示与隐藏修改框
const visibleBody = ref(false);

// 图片上传
const file = ref([]);
const formatResponse = (res) => {
    if (!res.url) {
        return { error: '上传失败，请重试' };
    }
    return { ...res, url: res.url };
};
const imgUrl = ref(null);
const visible = ref(false);
const changUrlhData = async (id, img) => {
    const res = await changeImgUrl(id, img);
    fetchData()
};
let id = ref();
const show = ref()
const imgSUC = async (c) => {
    await changUrlhData(id.value, c.response.imageUrl);
    visible.value = false
    visibleBody.value = false
    file.value = []
    show.value = true
}
// 更改图片
const close = () => {
    visible.value = false;
};
const onConfirm = () => {
    if (toRaw(imgUrl).length >= 10) {
        console.log('click确定', toRaw(imgUrl));
    }
};
const showViewBody = (uid) => {
    id.value = uid;
    visibleBody.value = true
}
// 是否删除轮播图
const visible2 = ref(false);
const deleteImg = (uid) => {
    visible2.value = true;

    id.value = uid;
    console.log('删除图片', id.value)
}
const checkedDeleteImg = async () => {
    console.log('删除图片1', id.value)
    await deleteImgUrl(id.value);
    id.value = undefined;
    fetchData()
    visible2.value = false;
}
</script>
<style scoped>

</style>